<template>
    <div class="dashboard-container">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <div class="logo-section">
          <img src="@/assets/logo.png" alt="Logo" class="logo" />
          <div class="text-section">
            <h2>党建平台</h2>
            <p>江西师范大学软件学院党建平台</p>
          </div>
        </div>
        <nav class="menu">
          <div class="menu-item" @click="toggleDropdown('dashboard')">
            仪表盘
            <span v-if="dropdownOpen.dashboard">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.dashboard" class="submenu">
            <div class="submenu-item">概览</div>
            <div class="submenu-item">分析</div>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('settings')">
            系统设置
            <span v-if="dropdownOpen.settings">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.settings" class="submenu">
            <div class="submenu-item">用户管理</div>
            <div class="submenu-item">权限设置</div>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('interface')">
            界面设置
            <span v-if="dropdownOpen.interface">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.interface" class="submenu">
            <div class="submenu-item">主题</div>
            <div class="submenu-item">布局</div>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('team')">
            团队成员
            <span v-if="dropdownOpen.team">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.team" class="submenu">
            <router-link to="/team-members" class="submenu-item">成员列表</router-link>
            <div class="submenu-item">邀请成员</div>
          </div>
  
          <div class="menu-item">更多</div>
          <div class="menu-item" @click="logout">退出</div>
        </nav>
      </aside>
  
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <header class="header">
          <div class="welcome">欢迎您，第一党支部xxx</div>
          <div class="notifications">
            <span class="notification-icon">🔔</span>
            <span class="notification-count">1</span>
          </div>
        </header>
  
        <!-- 成员列表区域 -->
        <section class="content">
          <div class="team-members-section">
            <h3>团队成员列表</h3>
            <div class="members-container">
              <div v-for="member in members" :key="member.id" class="member-card">
                <img :src="member.avatar" alt="成员头像" class="avatar" />
                <div class="member-details">
                  <h4 class="member-name">{{ member.name }}</h4>
                  <p class="member-position">{{ member.position }}</p>
                  <p class="member-info">年龄：{{ member.age }}</p>
                  <p class="member-info">电子邮箱：{{ member.email }}</p>
                  <p class="member-info">电话：{{ member.phone }}</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "TeamMembers",
    data() {
      return {
        dropdownOpen: {
          dashboard: false,
          settings: false,
          interface: false,
          team: false,
        },
        members: [
          {
            id: 1,
            name: "张三",
            position: "书记",
            age: 33,
            email: "zhangsan@jxnu.edu.cn",
            phone: "0752-12345678",
            avatar: "https://example.com/avatar1.png",
          },
          {
            id: 2,
            name: "李四",
            position: "组织委员",
            age: 29,
            email: "lisi@jxnu.edu.cn",
            phone: "0752-87654321",
            avatar: "https://example.com/avatar2.png",
          },
          {
            id: 3,
            name: "王五",
            position: "宣传委员",
            age: 28,
            email: "wangwu@jxnu.edu.cn",
            phone: "0752-11223344",
            avatar: "https://example.com/avatar3.png",
          },
        ],
      };
    },
    methods: {
      toggleDropdown(menu) {
        this.dropdownOpen[menu] = !this.dropdownOpen[menu];
      },
      logout() {
        // 跳转回首页
        this.$router.push({ name: "Login" });
      },
    },
  };
  </script>
  
  <style scoped>
  /* 页面整体布局 */
  .dashboard-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
  }
  
  /* 左侧导航栏样式 */
  .sidebar {
    width: 250px;
    background-color: #d9534f;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .logo {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  .text-section h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }
  .text-section p {
    font-size: 12px;
    color: #f8f8f8;
    margin: 0;
  }
  .menu {
    width: 100%;
    padding-top: 20px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
  }
  .menu-item:hover {
    background-color: #c0392b;
  }
  
  /* 二级菜单样式 */
  .submenu-item {
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
  }
  .submenu-item:hover {
    background-color: #c0392b;
  }
  
  /* 主内容样式 */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  /* 顶部导航栏 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
  }
  .welcome {
    font-size: 16px;
  }
  .notifications {
    display: flex;
    align-items: center;
  }
  .notification-icon {
    font-size: 20px;
    margin-right: 5px;
  }
  .notification-count {
    background-color: #ff6b6b;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
  }
  
  /* 成员列表区域样式 */
  .team-members-section {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
  .members-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  .member-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
    object-fit: cover;
  }
  .member-details {
    text-align: center;
  }
  .member-name {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    margin: 5px 0;
  }
  .member-position {
    font-size: 16px;
    color: #888;
    margin: 5px 0;
  }
  .member-info {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
  }
  </style>
  